<template>
  <!-- 设定推荐货品 -->
  <div>
    <el-dialog
      v-loading="loading"
      title="推荐货品设置"
      :visible="visible"
      width="1000px"
      element-loading-text="玩命加载中"
      element-loading-spinner="el-icon-loading"
      @close="close"
    >
      <div class="filter-container between">
        <div class="filter-item">
          <span class="filter-item_span">货品编号：{{ goodsInfo.goodsNo }} </span>
          <span class="filter-item_span mar_left10"> 货品名称：{{ goodsInfo.goodsName }} </span>
        </div>
        <el-button
          type="primary"
          class="mar_left10"
          size="small"
          @click="add"
        >新增</el-button>
      </div>
      <div class="tableBox">
        <el-table border size="small" max-height="450" :data="list">
          <el-table-column
            align="center"
            label="操作"
            width="80"
            header-align="center"
            fixed
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item mar_3"
                effect="light"
                content="删除"
                placement="top"
              >
                <a @click="handleDel(scope.row)">
                  <i class="el-icon-delete" />
                </a>
              </el-tooltip>

              <el-tooltip
                class="item mar_3"
                effect="light"
                content="编辑"
                placement="top"
              >
                <a @click="handleEdit(scope.row)">
                  <i class="el-icon-edit-outline" />
                </a>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="picUrl"
            header-align="center"
            label="货品图片"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <viewer
                :key="$downPath + scope.row.picUrl"
                class="Centered"
                :options="vieweroptions"
              >
                <img
                  v-if="scope.row.picUrl"
                  :key="$downPath + scope.row.picUrl"
                  v-lazy="$downPath + scope.row.picUrl"
                  class="avatar"
                  :src="$downPath + scope.row.picUrl"
                  width="40"
                >
              </viewer>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsNoRecommended"
            header-align="center"
            width="100"
            show-overflow-tooltip
            label="货品编码"
          />
          <el-table-column
            prop="goodsName"
            header-align="center"
            show-overflow-tooltip
            label="货品名称"
          />
          <el-table-column
            property="sortNo"
            label="排序"
            align="center"
            width="100"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            property="picUrl"
            label="是否启用"
            header-align="center"
            width="120"
          >
            <template slot-scope="scope">
              <el-tag type="primary">{{
                scope.row.isEnabled ? "已启用" : "未启用"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            header-align="center"
            label="创建时间"
            width="160"
          />
        </el-table>
      </div>
      <selGoodsDialog
        v-model="list"
        :visible.sync="selGoodsVisible"
        :goods="goodsInfo"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-dialog>

    <!--编辑推荐货品-->
    <el-dialog
      title="编辑推荐货品"
      :visible.sync="goodsCommendVisible"
      :close-on-click-modal="false"
      width="800px"
      append-to-body
      @close="goodsCommendClose()"
    >
      <el-form
        ref="goodsCommend"
        :model="goodsCommend"
        status-icon
        label-position="right"
        label-width="120px"
        style="width: fit-content; margin-left: 50px"
      >
        <el-form-item label="货品编码" prop="goodsNo">
          <el-input
            v-model="goodsCommend.goodsNo"
            style="width: 300px"
            maxlength="20"
            :disabled="true"
            placeholder="货品编码"
          />
        </el-form-item>
        <el-form-item label="货品名称：" prop="goodsName">
          <el-input v-model="goodsCommend.goodsName" placeholder="请输入商品名称" :disabled="true" />
        </el-form-item>
        <el-form-item label="货品主图：">
          <img
            v-if="goodsCommend.picUrl"
            :key="$downPath + goodsCommend.picUrl"
            class="avatar"
            :src="$downPath + goodsCommend.picUrl"
            width="40"
          >
        </el-form-item>
        <el-form-item label="是否启用" prop="isEnabled">
          <el-switch
            v-model="goodsCommend.isEnabled"
            active-color="#13ce66"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sortNo">
          <el-input-number
            v-model.number="goodsCommend.sortNo"
            :controls="false"
            :max="50"
            :min="0"
            maxlength="20"
            placeholder="排序"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button
          type="primary"
          @click="confirmDialog"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { queryList, saveList } from '@/api/goodsrecommended'
import selGoodsDialog from '@/components/SelGoods'
export default {
  name: 'GoodsRecommendedEditor',
  components: { selGoodsDialog },
  props: ['visible', 'value'],
  data() {
    return {
      vieweroptions: { zIndex: 5000 },
      selGoodsVisible: false,
      loading: false,
      listQuery: {},
      goodsInfo: { goodsNo: '', goodsName: '' },
      list: [],
      goodsCommendVisible: false,
      goodsCommend: {
        id: undefined,
        goodsNo: undefined,
        goodsName: undefined,
        picUrl: undefined,
        goodsNoRecommended: undefined,
        isEnabled: true,
        sortNo: 0
      }
    }
  },
  watch: {
    value() {
      this.goodsInfo = this.value
      this.search()
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    },
    search() {
      queryList(this.goodsInfo.goodsNo).then(res => {
        this.list = res.data
      })
    },
    add() { this.selGoodsVisible = true },
    cancelDialog() {
      this.goodsCommendVisible = false
    },
    confirmDialog() {
      var index = this.list.findIndex(x => x.id === this.goodsCommend.id)
      this.$set(this.list, index, this.goodsCommend)
      this.goodsCommendVisible = false
    },
    goodsCommendClose() {
      this.goodsCommendVisible = false
    },
    handleSave() {
      saveList(this.list).then(res => {
        this.msg('设置成功')
        this.close()
      })
    },
    handleDel(row) {
      this.list.splice(this.list.indexOf(row), 1)
    },
    handleEdit(row) {
      this.goodsCommend = Object.assign({}, row)
      this.goodsCommendVisible = true
    }
  }
}
</script>
